<template>
    <div class="wel_container">
        <h4 class="wel_title">{{ $t('text.welcome') }}</h4>
        <p class="maker_text">{{ $t('text.maker') }}</p>
        <div class="bp_list">
            <a href="https://gitee.com/zhuo-spring/accounting_app/releases" target="_blank" class="icon-tab">
                <img class="icon-image" src="../../assets/images/accompanyIcon.png" />
            </a>
            <a href="https://space.bilibili.com/436148512?spm_id_from=333.1007.0.0" target="_blank" class="icon-tab">
                <img class="icon-image" src="../../assets/images/bili.png" />
            </a>
            <a href="https://gitee.com/zhuo-spring/asg-tauri-project/releases" target="_blank" class="icon-tab">
                <img src="../../assets/images/extractIcon.png" class="icon-image" /></a>
        </div>
        <n-button strong secondary type="info" @click="createNewGame">
            {{ $t('button.createGame') }}
        </n-button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import storeHelper from '@/utils/TauriStore';
import { getTabProcess } from '@/views/createGame/generator.ts';
import { useGameStore } from '@/stores/game';
const gameStore = useGameStore();

const router = useRouter();
const createNewGame = async () => {
    const gameKeys = [
        'gameInfo',
        'allScore',
        'mapSelect',
        'hasTalentHun',
        'hasTalentSur',
        'hasGame',
        'teamInfo'
    ];
    for(const key of gameKeys) {
        storeHelper.delete(key);
    }
    gameStore.clearGlobalBp();
    const tabProcess = await getTabProcess();
    // 初始化值：
    storeHelper.set('session',tabProcess[0]) ?? 'bo1';
    router.push('newGame');
}
</script>

<style lang="scss" scoped>
@keyframes flicker {

    /*创建动画*/
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }

}

.wel_container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5em;

    .wel_title {
        font-size: 2em;
        color: #9966FF;
        /*设置文字颜色*/
        font-weight: bolder;
        /*设置字体粗细*/
        animation: flicker 2s infinite;
        /*设置动画*/
    }

    .maker_text {
        @include useTheme {
            color: getVar('text');
        }
    }

    .bp_list {
        height: 20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2em;

        a {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

}
</style>